<template>
  <div class="serviceCenter_wrap">
    <headTop :headClass="'white_header'">
      Service center
    </headTop>
    <div class="qq_box">
      <div class="imag_wrap">
        <img src="./../image/qq.png" alt="qq">
      </div>
      <p class="qq_txt">Customer serviceQQ : {{qq}}</p>
    </div>
     <div class="wxin_box">
      <div class="imag_wrap">
        <img :src="qrCode" alt="wxin">
      </div>
      <p class="wxin_txt">WeChat customer service QR Code</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'serviceCenter',
  data () {
    return {
      qq: '',
      qrCode: ''
    };
  },
  methods: {
    // Customer service interface
    getInfo () {
      this.axios.get('index/auth/services').then(({data}) => {
        if (data.status === 200) {
          this.qq = data.data.mobile;
          this.qrCode = data.data.qrcode;
        } else if (data.status === 2000) {
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .serviceCenter_wrap{
    padding-top: 90px;
    background: #f4f5f7;
    .qq_box {
      height: 300px;
      background: #fff;
      text-align: center;
      margin: 20px 0;
      padding-top: 82px;
      .imag_wrap {
        text-align: center;
        img {
          width: 78px;
          height: 84px;
        }
      }
      .qq_txt {
        height: 86px;
        line-height: 86px;
        font-size: 26px;
        color: #5985f6;
      }
    }
    .wxin_box {
      // height: 380px;
      background: #fff;
      text-align: center;
      padding-top: 85px;
      .imag_wrap {
        text-align: center;
        img {
          width: 252px;
          height: 252px;
        }
      }
      .wxin_txt {
        height: 80px;
        line-height: 80px;
        font-size: 26px;
        color: #5985f6;
      }
    }
  }
</style>
